<template>
	<div class="nowPlaying">
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad"
		>
			<van-cell v-for="item in list">
				<div @click="filmId(item.filmId)">
					<div class="itemList">
						<div class="img"><img :src="item.poster" class="imgLeft" /></div>
						<div class="itemCenter">
							<h3 class="title">
								{{ item.name }}<span>{{ item.item.name }}</span>
							</h3>
							<div class="grade">
								观众评分<span>{{ item.grade }}</span>
							</div>
							<div class="actors">
								主演：<span v-for="(v, i) in item.actors" :key="i">{{
									v.name
								}}</span>
							</div>
							<div class="runtime">
								{{ item.nation }} | {{ item.runtime }}分钟
							</div>
						</div>
						<div class="btn">
							<van-button plain type="danger">购票</van-button>
						</div>
					</div>
				</div>
			</van-cell>
		</van-list>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data() {
		return {
			loading: false,
			finished: false,
			refreshing: false,
			total: 0,
			page: 1,
			list: [],
		}
	},
	created() {
		if (this.list.length === this.total) {
			this.finished = false
			return
		}
		this.onLoad()
	},
	methods: {
		filmId(id) {
			this.$router.push('/film/' + id)
			// console.log(id,111);
		},
		onLoad() {
			this.getData()
		},
		onRefresh() {
			// 加载状态结束
			this.finished = false
			this.loading = true
			this.getData()
		},
		getData() {
			if (this.refreshing) {
				this.list = []
				this.refreshing = false
				this.page = 1
			}
			axios({
				url: `/api/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.page}&pageSize=10&type=1&k=3499734`,
				method: 'get',
				headers: {
					'X-Client-Info':
						'{"a":"3000","ch":"1002","v":"5.2.1","e":"1676514945111647674859521","bc":"110100"}',
					'X-Host': 'mall.film-ticket.film.list',
				},
			}).then((res) => {
				this.list = [...this.list, ...res.data.data.films]
				this.total = res.data.data.total
				this.page++
				if (this.list.length >= this.total) {
					this.finished = true
				}
			})
			this.loading = false
		},
	},
	mounted() {},
}
</script>

<style lang="less" scoped>
.nowPlaying {
	margin-top: 10px;
	margin-bottom: 50px;
}
.img {
	width: 20vw;
	height: 12.5rem;
	.imgLeft {
		width: 66px;
		height: 12.5rem;
	}
}
.itemList {
	display: flex;
}
.itemCenter {
	max-width: 150px;
	font-size: 16px;
	line-height: 28px;
	margin-left: 5px;
}
.title {
	font-size: 12px;
	color: #000;
	display: flex;
	span {
		display: block;
		width: 16px;
		height: 14px;
		margin-left: 10px;
		background: #d2d6dc;
		font-size: 9px;
		color: #fff;
		border-radius: 2px;
		padding: 0px 2px;
		text-align: center;
		line-height: 14px;
		margin-top: 5px;
	}
}
.grade {
	color: #797d82;
	font-size: 16px;
	span {
		color: #ffb232;
		margin-left: 5px;
	}
}
.actors {
	color: #797d82;
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	span {
		margin-left: 3px;
	}
}
.runtime {
	color: #797d82;
	font-size: 16px;
}
.btn {
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	button {
		width: 50px;
		font-size: 12px;
		padding: 0px;
		height: 30px;
	}
}
</style>
